<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 13:30:57
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2024-01-02 17:12:49
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractFileSetting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 合同预览 -->
<template>
  <div v-if="previewData.data.length > 0">
    <a-layout>
      <a-layout>
        <a-layout-content class="main">
          <RichTextNew
            v-model:content="previewData.data[currTabIndex][currFileIndex].text"
            :name="`previewRich${
              previewData.data[currTabIndex]?.[currFileIndex]?.id
                ? previewData.data[currTabIndex]?.[currFileIndex]?.id
                : previewData.data[currTabIndex]?.[currFileIndex]?.uid
            }`"
            disabled
          ></RichTextNew>
        </a-layout-content>
        <a-layout-sider style="width: 206px; margin-left: 1px" class="right">
          <a-tabs :default-active-key="1" v-model:active-key="currTabIndex">
            <a-tab-pane :key="0" title="变更前">
              <header>合同文件11</header>
              <a-divider />
              <section>
                <div class="title">
                  <div
                    @click="fileClick(0)"
                    class="item"
                    :class="currFileIndex === 0 ? 'item-select' : ''"
                  >
                    1、{{ previewData.data[0]?.[0]?.name }}
                  </div>
                </div>
                <a-divider />
              </section>
              <header>其他附件</header>
              <a-divider />
              <section>
                <div
                  class="title"
                  v-for="(item, index) in previewData?.data[0]"
                  :key="index"
                >
                  <div
                    @click="fileClick(index)"
                    class="item"
                    :class="currFileIndex === index ? 'item-select' : ''"
                    v-if="index > 0"
                  >
                    {{ +index + 1 }}、{{ item?.name }}
                  </div>
                </div>
                <a-divider />
              </section>
            </a-tab-pane>
            <a-tab-pane :key="1" title="变更后">
              <header>合同文件</header>
              <a-divider />
              <section>
                <div class="title">
                  <div
                    @click="fileClick(0)"
                    class="item"
                    :class="currFileIndex === 0 ? 'item-select' : ''"
                  >
                    1、{{ previewData.data[1]?.[0]?.name }}
                  </div>
                </div>
                <a-divider />
              </section>
              <header>其他附件</header>
              <a-divider />
              <section>
                <div
                  class="title"
                  v-for="(item, index) in previewData?.data[1]"
                  :key="index"
                >
                  <div
                    @click="fileClick(index)"
                    class="item"
                    :class="currFileIndex === index ? 'item-select' : ''"
                    v-if="index > 0"
                  >
                    {{ +index + 1 }}、{{ item?.name }}
                  </div>
                </div>
                <a-divider />
              </section>
            </a-tab-pane>
          </a-tabs>
        </a-layout-sider>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import { GetBusinessModalData } from '@/apis/controltotal';
import { useVModel } from '@vueuse/core';

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);
const emit = defineEmits(['update:visible', 'update:data', 'handleOk', 'save']);
const formData = useVModel(props, 'data', emit);

let previewData = reactive({
  data: []
});
let currTabIndex = ref(0); // 判断用户点击变更前还是变更后
let currFileIndex = ref(0); // 文件索引

watch(
  () => props.data.preData,
  (newVal: any) => {
    if (newVal) {
      previewData.data[0] = newVal;
    }
  },
  {
    deep: true
  }
);

watch(
  () => props.data.preViewData,
  (newVal: any) => {
    if (newVal) {
      previewData.data[1] = [...newVal].flat(1);
      currFileIndex.value = 0;
      console.log('====================================newValnewValnewVal');
      console.log(newVal);
      console.log(previewData.data);
      console.log('====================================');
    }
  },
  {
    deep: true
  }
);
let itemRefs: any = {}; // 储存动态生成的富文本ref

// 点击右边文件栏
const fileClick = (index: number) => {
  currFileIndex.value = index;
};
</script>

<style lang="less" scoped>
.right {
  header {
    font-size: 16px;
    font-weight: 700;
    height: 28px;
    line-height: 28px;
    &::before {
      margin-left: 10px;
      content: '';
      display: inline-block;
      width: 6px;
      height: 20px;
      margin-right: 10px;
      background: #165dff;
      position: relative;
      top: 5px;
      border-radius: 3px;
    }
  }
  section {
    // 文字太长显示省略号，并且不换行
    .title {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 10px;

      .item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        cursor: pointer;

        &-select {
          background-color: #eee;
        }

        &:hover {
          background-color: #eee;
        }
      }
    }
  }
}

.main {
  margin: 0 20px;
}

.right {
  .custom-radio-card {
    background-color: #fff;
  }
  .custom-radio-card:hover,
  .custom-radio-card-checked {
    border-color: rgb(var(--primary-6));
  }
}

:deep(.arco-radio-group .arco-radio) {
  margin: 0;
  width: 100%;
}
</style>
